<template>
    <div>
        <van-sticky>
            <van-tabs v-model="active" swipeable animated>
                <van-tab title="商品列表">

                </van-tab>
                <van-tab title="订单列表">

                </van-tab>
            </van-tabs>
        </van-sticky>
        <template v-if="active === 0">
            <div style="margin-top: 10px;margin-bottom: 100px">
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                    <van-list
                            v-model="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad"
                    >
                        <div v-for="item in list">
                            <div class="goods-box-box">
                                <div class="goods-box" @click="navTo(item.id)">
                                    <div>
                                        <van-image
                                                width="100"
                                                height="100"
                                                radius="10"
                                                :src="uri + item.image"
                                        />
                                    </div>
                                    <div class="info">
                                        <div class="title overF widthOver">{{item.title}}</div>
                                        <div style="display: flex;align-items: center;margin-top: 5px">
                                            <div style="">
                                                <van-image
                                                        width="20"
                                                        height="20"
                                                        radius="20"
                                                        :src="uri + item.headpic"
                                                />
                                            </div>
                                            <div style="font-size: 12px;margin-left: 5px">
                                                {{item.nickname}}
                                            </div>
                                        </div>
                                        <!--<div class="subtitle overF marGin">-->
                                        <!--{{item.subtitle?item.subtitle:'无副标题'}}-->
                                        <!--</div>-->
                                        <div class="s marGin">{{item.subtitle?item.subtitle:'无简介'}}</div>
                                        <div class="price">￥{{item.price}}</div>
                                    </div>
                                </div>
                                <div style="display: flex;align-items: center;justify-content: flex-end;">
                                    <div style="width: 100px;display: flex;align-items: center;justify-content: space-between;">
                                        <div style="display: flex;align-items: center;width: 50px">
                                            <template><img width="14" height="14" src="../../assets/img/thumbsUp.png"/><span style="margin-left: 3px">{{item.dianzannumber?item.dianzannumber:'点赞'}}</span></template>
                                        </div>
                                        <div style="margin-left: 15px;margin-top: 3px;width: 50px"><img width="14" height="14" src="../../assets/img/comment.png"/><span style="margin-left: 3px">{{item.commentnumber?item.commentnumber:'评论'}}</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </template>
        <template v-if="active === 1">
            <div style="margin-top: 10px;margin-bottom: 100px">
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                    <van-list
                            v-model="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad"
                    >
                        <div v-for="item in list">
                            <div class="orders-box" @click="navToo(item.id)">
                                <div>
                                    <div style="display: flex;align-items: center;justify-content: space-between;padding-bottom: 15px;">
                                        <div class="skuid">订单号:{{item.ordernumber}}</div>
                                        <div style="width: 50px;text-align: center;margin-right: 15px">{{item.status ==0
                                            ? '待支付': '已支付'}}
                                        </div>
                                    </div>
                                    <div style="width: 345px;border-bottom: 1px solid #eaeaea;margin-bottom: 15px"></div>
                                </div>
                                <div class="order-info">
                                    <div class="">商品名称:{{item.title}}</div>
                                    <div style="display: flex;align-items: center;margin-top: 5px">消费金额:<span
                                            class="price">￥{{item.price}}</span></div>
                                    <div style="width: 100%;margin-top: 15px;display: flex;align-items: center;justify-content: flex-end;">
                                        <div style="padding-right: 15px">下单时间:{{item.createtime | settime}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </template>
        <footers name="/goodsList" v-if="loadfoot"></footers>
    </div>
</template>

<script>
    import {format} from '../../assets/js/untils';
    import footers from '@/components/footer';

    export default {
        name: "goodsList",
        components: {
            footers
        },
        data() {
            return {
                uri: '',

                list: [],
                loading: false,
                refreshing: false,
                finished: false,
                page: 0,

                code: '',
                loadfoot: false,

                active: 0
            }
        },
        watch: {
            active() {
                sessionStorage.setItem('active', this.active);
                this.list = [];
                this.page = 0;
                this.onLoad();
            }
        },
        filters: {
            settime(val) {
                return format(val, true)
            }
        },
        mounted() {
            // if(sessionStorage.getItem('active')){
            //     this.active = sessionStorage.getItem('active');
            //     this.finished = false;
            //     this.page = 0;
            //     this.list = [];
            // }
            this.uri = this.Url;
        },
        methods: {
            onRefresh() {
                this.finished = false;
                this.page = 0;
                this.list = [];
                this.onLoad();
            },
            navTo(id) {
                this.$router.push('/goods/goodsDetails/' + id);
                // this.$router.push({ path:'/Wodeliao/womaideliaoxq/'+id})
            },
            navToo(id) {
                this.$router.push('/goods/orderDetails/' + id);
            },
            onLoad() {
                let token = localStorage.getItem("token");
                if (!token) {
                    this.onloads();
                    return false;
                }
                let that = this;
                if (that.refreshing) {
                    that.list = [];
                    that.refreshing = false;
                }
                that.page++;
                if (that.active === 0) {
                    that.request1.post1({
                        url: that.Url + "api/goods/goodsList",
                        params: {page: that.page},
                        success: function (res) {
                            console.log(res.data.data.data)
                            if (res.data.code == 1) {
                                if (res.data.data.data.length > 0) {
                                    for (let i = 0; i < res.data.data.data.length; i++) {
                                        that.list.push(res.data.data.data[i]);
                                    }
                                    that.finished = true;
                                } else if (res.data.data.data.length === 0) {
                                    that.finished = true;
                                }
                                this.loading = false;
                            } else {
                                alert(res.data.msg)
                            }
                        },
                        fail: function (error) {
                            alert(error.data.msg)
                        }
                    });
                } else {
                    that.request1.post1({
                        url: that.Url + "api/goods/orderList",
                        params: {page: that.page},
                        success: function (res) {
                            console.log(res.data.data.data)
                            if (res.data.code == 1) {
                                if (res.data.data.data.length > 0) {
                                    for (let i = 0; i < res.data.data.data.length; i++) {
                                        that.list.push(res.data.data.data[i]);
                                    }
                                    that.finished = true;
                                } else if (res.data.data.data.length === 0) {
                                    that.finished = true;
                                }
                                this.loading = false;
                            } else {
                                alert(res.data.msg)
                            }
                        },
                        fail: function (error) {
                            alert(error.data.msg)
                        }
                    });
                }
            },
            /* 登录的方法 */
            onloads() {
                var that = this;
                var ua = navigator.userAgent.toLowerCase();//获取判断用的对象

                if (ua.match(/MicroMessenger/i) == "micromessenger") {
                    console.log("wx打开");
                    this.getCode();
                } else {
                    console.log("h5打开");
                    that.$router.push("/log/login")
                }
            },
            getCode() {
                var that = this;
                var local = window.location.href;// 获取页面url
                that.code = that.getUrlCode().code; // 截取code
                if (that.code == null || that.code === '') { // 如果没有code，则去请求
                    that.$axios.post(that.Url + 'api/index/getAppid', {
                        params: {},
                    }).then(function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            let ress = res.data.data;
                            let appid = ress.appid;
                            console.log("appid:" + appid);
                            window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
                        }
                    }).catch(function (error) {
                        console.log(error)
                    });
                } else {
                    that.login()
                }
                that.$axios.post(that.Url + 'api/user.index/third', {code: that.code}
                ).then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        localStorage.setItem('token', res.data.data.userinfo.token);
                        that.onLoad();
                        that.loadfoot = true;
//                        that.getTab();
                    }
                }).catch(function (error) {
                    console.log(error)
                });
            },
            getUrlCode() { // 截取url中的code方法
                var url = location.search;
                this.winUrl = url;
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    var strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
                    }
                }
                return theRequest;
            },
            login() {
                var that = this;
                that.$axios.post(that.Url + 'api/user.index/third', {code: that.code}
                ).then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        localStorage.setItem('token', res.data.data.userinfo.token);
                        that.onLoad();
                        that.loadfoot = true;
                    }
                }).catch(function (error) {
                    console.log(error)
                });
            },
        }
    }
</script>

<style scoped>
    .goods-box-box {
        background-color: #ffffff;
        padding: 10px 15px;
        margin: 0 15px 20px 15px;
        border-radius: 10px;
        color: #333;
    }

    .goods-box {
        display: flex;
    }

    .orders-box {
        overflow: hidden;
        background-color: #ffffff;
        padding: 10px 0 10px 15px;
        margin: 0 15px 20px 15px;
        border-radius: 10px;
        color: #333;
        font-size: 13px;
    }

    .skuid {
        width: 100%;
        color: #000;
        font-size: 14px;
    }

    .info {
        margin-left: 20px;
    }

    .title {
        font-size: 15px;
        font-weight: bold;
    }

    .subtitle {
        font-size: 14px;
    }

    .marGin {
        margin: 5px 0;
    }

    .widthOver {
        width: 190px;
    }

    .overF {
        width: 190px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .s {
        color: #999;
    }

    .price {
        display: flex;
        margin-top: 10px;
        justify-content: start;
        color: rgba(255, 93, 49, 0.87);
    }
</style>